<template>
    <div>
        <van-nav-bar left-arrow title="详情" @click-left="onClickLeft"></van-nav-bar>
        <div class="user-item">
            <div class="user-top">
                <div class="user-avatar">
                    <img :src="data.user.avatar" />
                </div>
                <div class="user-info">
                    <div>
                        <h3>
                            {{ data.user.userName }}<span> 工龄 {{ entryTimeText }}</span>
                        </h3>
                        <span class="right-info">{{ data.reviewTimeText }}</span>
                    </div>
                    <div>
                        <p>{{ data.user.opDepartmentPositionName }} | 入职薪资{{ entrySalary }}</p>
                    </div>
                </div>
            </div>
            <!-- <div class="evaluation-wish">
                <span>上月薪资：16000.00</span>
                <span>平均月薪：15000.00</span>
            </div> -->
            <div class="user-wages">
                <table cellspacing="1">
                    <tr>
                        <th colspan="2">收到<img src="@/assets/images/icon-flower.png" class="icon-image" />：{{ data.flowerNum }}</th>
                        <th colspan="2">收到<img src="@/assets/images/icon-cow.png" class="icon-image" />：{{ data.cowNum }}</th>
                        <th colspan="2">收到<img src="@/assets/images/icon-crown.png" class="icon-image" />：{{ data.crownNum }}</th>
                    </tr>
                    <tr>
                        <th colspan="3">发起群策群力：{{ data.qunlilanchNum }}</th>
                        <th colspan="3">参与群策群力：{{ data.qunlienterNum }}</th>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <p>本月的进步和功劳：</p>
                            <div v-html="data.advantageRemark"></div>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="2" class="bgGray">收到<img src="@/assets/images/icon-bom.png" class="icon-image" />：{{ data.bombNum }}</th>
                        <th colspan="2" class="bgGray">收到<img src="@/assets/images/icon-pig.png" class="icon-image" />：{{ data.pigNum }}</th>
                        <th colspan="2" class="bgGray">换组次数：{{ data.teamchangeNum }}</th>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <p>本月的过失和不足：</p>
                            <div v-html="data.shortcomingRemark"></div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" class="salary-td">
                            <strong>{{ data.month ? parseInt(data.month.split("-")[1]) : "" }}月申请的薪资：</strong
                            ><span class="blue">{{ data.salary }}元</span>
                        </td>
                    </tr>
                    <tr v-if="data.type === 2 && !data.isAlreadyFirstComment">
                        <td colspan="6" class="salary-td">
                            <strong>我认为TA该拿的薪资(盲评)：</strong><span class="blue">{{ data.salary }}元</span>
                        </td>
                    </tr>
                    <tr v-if="data.type === 2 && !data.isAlreadySecondComment">
                        <td colspan="6" class="salary-td">
                            <strong>我认为TA该拿的薪资(再评一次)：</strong><span class="blue">{{ data.repeatSalary }}元</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="remote-list">
            <p class="remote-list-head">{{ alreadyCommentNum }}人已投票/{{ teamEmployeeNum }}人，参与率：{{ rate }}%</p>
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>
                                姓名
                            </th>
                            <th @click="sortList('salary')">
                                    <span>盲评</span
                                    ><span class="sort-icon" :class="{ 'sort-asc': sort.salary === 'asc', 'sort-desc': sort.salary === 'desc' }"></span>
                            </th>
                            <th @click="sortList('reportSalary')">
                                    <span>再评一次</span
                                    ><span
                                        class="sort-icon"
                                        :class="{ 'sort-asc': sort.reportSalary === 'asc', 'sort-desc': sort.reportSalary === 'desc' }"
                                    ></span>
                            </th>
                            <th @click="sortList('time')">
                                    <span>评价时间</span
                                    ><span class="sort-icon" :class="{ 'sort-asc': sort.time === 'asc', 'sort-desc': sort.time === 'desc' }"></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="index">
                            <td>
                                <div class="table-user-info">
                                    <img :src="item.user.avatar" class="user-avatar" />
                                    <div>
                                        <h3>{{ item.user.userName }}</h3>
                                        <p>{{ item.user.opDepartmentPositionName }}</p>
                                    </div>
                                </div>
                            </td>
                            <td>{{ item.salary }}</td>
                            <td>{{ item.repeatSalary }}</td>
                            <td style="white-space:pre-wrap;">{{ item.repeatTimeText || item.reviewTimeText }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Icon, NavBar, Picker, Popup, DatetimePicker, CountDown, Field } from "vant";
import httpRequest from "../../util/httpRequest";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [DatetimePicker.name]: DatetimePicker,
        [CountDown.name]: CountDown,
        [Field.name]: Field,
    },
    data() {
        return {
            data: {
                user: {},
            },
            list: [],
            alreadyCommentNum: 0,
            teamEmployeeNum: 0,
            sort: {
                salary: "",
                reportSalary: "",
                time: "",
            },
            entryTime: "",
            entrySalary: "",
        };
    },
    computed: {
        rate() {
            return parseInt((this.alreadyCommentNum / this.teamEmployeeNum) * 100);
        },
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
        this.entryTimeText = this.getEntryTimeText(this.$route.query.entryTime);
        this.entrySalary = this.$route.query.entrySalary;
        this.getList();
    },
    methods: {
        getEntryTimeText(time) {
            const now = new Date().getTime();
            const timer = new Date(time).getTime();
            let month = (now - timer) / 1000 / 60 / 60 / 24 / 30;
            if (month > 12) {
                month = month / 12;
                return parseInt(month + "") + "年";
            } else {
                month = month < 1 ? 1 : month;
                return parseInt(month + "") + "个月";
            }
        },
        getList() {
            httpRequest.post("commentDetail", this.$route.query).then((res) => {
                this.data = res.data.selfComment;
                this.data.reviewTimeText = this.data.reviewTime ? this.data.reviewTime.slice(0, 16) : "";
                this.data.advantageRemark = this.data.advantageRemark.replace(/\n/g,'<br />');
                this.data.shortcomingRemark = this.data.shortcomingRemark.replace(/\n/g,'<br />');
                this.list = res.data.otherCommentList;
                this.list.forEach((e, index) => {
                    // e.repeatTimeText = this.getTimeText(e.repeatTime);
                    e.repeatTimeText = e.repeatTime ? e.repeatTime.slice(0, 16) : "";
                    // e.reviewTimeText = this.getTimeText(e.reviewTime);
                    e.reviewTimeText = e.reviewTime ? e.reviewTime.slice(0, 16) : "";
                    e.index = index;
                });
                this.alreadyCommentNum = res.data.alreadyCommentNum;
                this.teamEmployeeNum = res.data.teamEmployeeNum - 1;
            });
        },
        onClickLeft() {
            this.$router.back();
        },
        getTimeText(time) {
            if (time) {
                const now = new Date().getTime();
                const timer = new Date(time).getTime();
                let minutes = (now - timer) / 1000 / 60;
                if (minutes > 60) {
                    minutes = minutes / 60;
                    return parseInt(minutes + "") + "小时前发布";
                } else {
                    return parseInt(minutes + "") + "分钟前发布";
                }
            } else {
                return "";
            }
        },
        sortList(type) {
            switch (type) {
                case "salary":
                    if (this.sort.salary === "") {
                        this.sort.salary = "asc";
                        this.sort.reportSalary = "";
                        this.sort.time = "";
                        this.list.sort((a, b) => {
                            return a.salary - b.salary;
                        });
                    } else if (this.sort.salary === "asc") {
                        this.sort.salary = "desc";
                        this.list.sort((a, b) => {
                            return b.salary - a.salary;
                        });
                    } else {
                        this.sort.salary = "";
                        this.list.sort((a, b) => {
                            return a.index - b.index;
                        });
                    }
                    break;
                case "reportSalary":
                    if (this.sort.reportSalary === "") {
                        this.sort.reportSalary = "asc";
                        this.sort.salary = "";
                        this.sort.time = "";
                        this.list.sort((a, b) => {
                            return a.reportSalary - b.reportSalary;
                        });
                    } else if (this.sort.reportSalary === "asc") {
                        this.sort.reportSalary = "desc";
                        this.list.sort((a, b) => {
                            return b.reportSalary - a.reportSalary;
                        });
                    } else {
                        this.sort.reportSalary = "";
                        this.list.sort((a, b) => {
                            return a.index - b.index;
                        });
                    }
                    break;
                case "time":
                    if (this.sort.time === "") {
                        this.sort.reportSalary = "";
                        this.sort.salary = "";
                        this.sort.time = "asc";
                        this.list.sort((a, b) => {
                            const atime = a.repeatTime || a.reviewTime;
                            const btime = b.repeatTime || b.reviewTime;
                            const atimer = new Date(atime).getTime();
                            const btimer = new Date(btime).getTime();
                            return atimer - btimer;
                        });
                    } else if (this.sort.time === "asc") {
                        this.sort.time = "desc";
                        this.list.sort((a, b) => {
                            const atime = a.repeatTime || a.reviewTime;
                            const btime = b.repeatTime || b.reviewTime;
                            const atimer = new Date(atime).getTime();
                            const btimer = new Date(btime).getTime();
                            return btimer - atimer;
                        });
                    } else {
                        this.sort.time = "";
                        this.list.sort((a, b) => {
                            return a.index - b.index;
                        });
                    }
                    break;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.evaluation-wish {
    height: 64px;
    line-height: 64px;
    background: #fff3ea;
    border-radius: 8px;
    color: #fe7b07;
    font-size: 26px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    span {
        margin: 0 20px;
    }
}

.user-item {
    background: #fff;
    padding: 30px 20px;
    position: relative;
    .seal {
        position: absolute;
        right: 20px;
        top: 10px;
        width: 125px;
    }
    .user-top {
        padding: 34px 0;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        .user-avatar {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            margin-right: 20px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
        }
    }
}
.remote-list {
    background: #fff;
    margin-top: 20px;
    padding-bottom: 30px;
    &-head {
        height: 110px;
        line-height: 110px;
        text-align: left;
        font-size: 28px;
        font-weight: bold;
        padding: 0 20px;
        color: #000;
    }
}
</style>
